<template>
  <div>
    <a-drawer
      v-model:open="open"
      :title="dataInfo.name"
      width="80%"
      placement="right"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-descriptions title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="商品类目">{{
            dataInfo.typeName
          }}</a-descriptions-item>
          <a-descriptions-item label="子类目">{{
            dataInfo.subTypeName
          }}</a-descriptions-item>
          <a-descriptions-item label="所属品牌">{{
            dataInfo.brandName
          }}</a-descriptions-item>
        </a-descriptions>

        <a-form
          ref="formRef"
          :model="formData"
          labelAlign="left"
          :label-col="{ span: 2 }"
          :wrapper-col="{ span: 18 }"
        >
          <a-space direction="vertical" style="width: 100%" size="small">
            <div>
              <text style="color: red">*</text>
              上传实拍照片仅支持上传png,jpg图片
            </div>
            <div style="display: flex; align-items: center">
              <div
                class="img-item"
                v-for="(item, index) in dataInfo.sampleGraphJSON"
                :key="index"
              >
                <a-upload
                  accept=".jpg,.png"
                  v-model:file-list="fileList"
                  name="avatar"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  :before-upload="beforeUpload"
                  @change="(file) => handleChange(file, item)"
                >
                  <img
                    v-if="item.imgData"
                    style="width: 86px; height: 86px"
                    :src="item.imgData"
                    alt="avatar"
                  />
                  <div v-else>
                    <loading-outlined v-if="loading"></loading-outlined>
                    <plus-outlined v-else></plus-outlined>
                  </div>
                </a-upload>
                <div class="img-label">{{ item.label }}</div>
              </div>
            </div>

            <div>
              <text style="color: red">*</text>
              商品描述
            </div>
            <a-textarea
              :rows="6"
              v-model:value="formData.content"
              placeholder="请输入本款商品的描述信息！如外观，价值，来源等..."
              :maxlength="800"
              show-count
            />
            <template v-for="item in dataInfo.parametersJSON">
              <a-form-item :label="item.title">
                <a-input
                  v-model:value="item.value"
                  :placeholder="`输入${item.title}`"
                  style="width: 50%"
                />
              </a-form-item>
            </template>

            <a-form-item
              label="商品成色"
              name="finenessId"
              :rules="[{ required: true, message: '请选择商品成色!' }]"
            >
              <div style="display: flex; align-items: center">
                <a-select
                  ref="select"
                  v-model:value="formData.finenessId"
                  placeholder="请选择商品成色"
                  style="width: 50%"
                >
                  <a-select-option
                    v-for="item in goodsFinenessList"
                    :value="item.id"
                    >{{ item.content }}</a-select-option
                  >
                </a-select>
                <a-button type="link" @click="modalOpen = true"
                  >成色鉴定标准</a-button
                >
              </div>
            </a-form-item>

            <a-form-item
              label="商品原价"
              name="originalPrice"
              :rules="[{ required: true, message: '商品原价不能为空!' }]"
            >
              <a-input
                v-model:value="formData.originalPrice"
                type="number"
                placeholder="输入商品原价"
                prefix="￥"
                suffix="元"
                style="width: 50%"
              />
            </a-form-item>

            <a-form-item
              label="出售价格"
              name="salePrice"
              :rules="[{ required: true, message: '出售价格不能为空!' }]"
            >
              <div style="display: flex; align-items: center">
                <a-input
                  v-model:value="formData.salePrice"
                  type="number"
                  placeholder="输入出售价格"
                  prefix="￥"
                  suffix="元"
                  style="width: 50%"
                />
                <div
                  style="display: flex; align-items: center; margin-left: 16px"
                >
                  当前商品近7天成交均价<text style="color: #1890ff"
                    >¥1212.32</text
                  >元
                </div>
              </div>
            </a-form-item>

            <a-form-item
              label="滞销商品处理"
              name="slowMg"
              :rules="[{ required: true, message: '请选择滞销商品处理!' }]"
            >
              <a-radio-group v-model:value="formData.slowMg">
                <a-radio :value="1">接收</a-radio>
                <a-radio :value="0">不接受</a-radio>
              </a-radio-group>
            </a-form-item>

            <a-typography-text
              >90天展示期满后仍未售出，到手价自动降至90%继续售卖并增加商品曝光率。</a-typography-text
            >

            <a-form-item label="交易说明">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                "
              >
                <a-typography-text type="secondary"
                  >1.商品成交后统一发货到平台鉴定，鉴定完成后平台直接发给客户；若鉴定为假，平台将自动取消本次商品交易并对商家处以惩罚</a-typography-text
                >
                <a-typography-text type="secondary"
                  >2.商品销售成功后，商家将在账户提现时扣平台3%服务费。</a-typography-text
                >
              </div>
            </a-form-item>

            <div class="layout-flexSpace">
              <div></div>
              <a-space wrap>
                <a-button @click="resetForm">重置</a-button>
                <a-button type="primary" @click="handleSubmit">出售</a-button>
              </a-space>
            </div>
          </a-space>
        </a-form>
      </a-space>
    </a-drawer>

    <a-modal
      v-model:open="modalOpen"
      title="成色平级标准"
      width="50%"
      :footer="null"
    >
      <a-space direction="vertical" style="width: 100%" size="small">
        <div class="card">
          <div class="item">
            <div><text>99</text>新</div>
            <div class="content">基本全新</div>
            <div class="text">外观与新品无差异，可能存在极轻微陈列放置痕迹</div>
          </div>
          <div class="item">
            <div><text>98</text>新</div>
            <div class="content">极细微瑕疵</div>
            <div class="text">外观品相佳，极轻微的污渍、划痕等痕迹</div>
          </div>
          <div class="item">
            <div><text>95</text>新</div>
            <div class="content">轻微使用</div>
            <div class="text">
              仅使用过几次，局部有轻微划痕磨损等，整体状态优质
            </div>
          </div>
          <div class="item">
            <div><text>90</text>新</div>
            <div class="content">少量使用</div>
            <div class="text">
              整体成色较新，有正常划痕、五金氧化等瑕疵很不明显
            </div>
          </div>
          <div class="item">
            <div><text>85</text>新</div>
            <div class="content">日常使用</div>
            <div class="text">
              日常使用后状态、局部有较为明显的划痕、污渍等情况
            </div>
          </div>
        </div>
        <a-typography-text type="secondary">
          成色平级仅供参考，不直接影响商品价格
        </a-typography-text>
        <a-typography-text type="secondary">
          配件是否齐全不作为平均标准，配件详情以拍摄展示为准，瑕疵描述仅为店铺评判标准，具体详情请参照实物图片
        </a-typography-text>
      </a-space>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, toRaw, nextTick } from "vue";
import { cloneDeep } from "lodash";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { goodsSave, editDetail } from "@/api/goods";
import { goodsFineness } from "@/api/order";
import { singleUploadsFile } from "@/api/upload";
import { message } from "ant-design-vue";
const open = ref(false);
const formRef = ref(null);
const types = ref("");
const addFunc = (id, type) => {
  console.log("id", id);
  types.value = type;
  if (type == "add") {
    addDetailList(id);
  } else {
    editDetailList(id);
  }
  resetForm();
  open.value = true;
};
const dataInfo = ref({});
const addDetailList = async (id) => {
  const result = {}
  if (result.code == 200) {
    const datas = result.data;
    datas.sampleGraphJSON = datas.sampleGraphJSON.map((res) => {
      return {
        imgData: res.exampleImg,
        exampleImg: res.exampleImg,
        label: res.label,
      };
    });
    dataInfo.value = datas;
  }
};
const editDetailList = async (id) => {
  const result = await editDetail({ id });
  if (result.code == 200) {
    dataInfo.value = result.data;
    formData.value = result.data;
  }
};

const formData = ref({
  baseId: undefined,
  content: undefined,
  finenessId: undefined,
  id: undefined,
  originalPrice: undefined,
  salePrice: null,
  slowMg: undefined,
  parameters: null,
  banner: null,
});
const fileList = ref(null);
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.value.splice(fileList.value.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const imgList = ref([]);
const handleChange = (file, item) => {
  const index = imgList.value.indexOf(item);
  if (index == -1) {
    imgList.value.push(item);
  } else {
    imgList.value.splice(index, 1, item);
  }
  console.log(imgList.value);
  const formData = new FormData();
  formData.append("file", file.file);
  formData.append("type", "1");
  singleUploadsFile(formData).then((res) => {
    item.imgData = res.data;
  });
};
const emits = defineEmits("reflashList");
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = Object.assign({}, formData.value);
      if (types.value == "add") {
        if (imgList.value.length < dataInfo.value.sampleGraphJSON.length) {
          message.error("请上传全部实拍照片");
          return;
        }
        const filterArr = cloneDeep(dataInfo.value).sampleGraphJSON.filter(
          (res) => {
            return toRaw(imgList.value).map((val) => {
              if (val.label == res.label) {
                return {
                  imgData: val.imgData,
                };
              }
            });
          }
        );
        params.baseId = dataInfo.value.id;
        params.banner = filterArr.map((val) => val.imgData);
      } else {
        params.banner = cloneDeep(dataInfo.value).sampleGraphJSON.map((val) => val.imgData);
      }
      params.parameters = cloneDeep(dataInfo.value).parametersJSON;
      const result = await goodsSave(params);
      if (result.code == 200) {
        open.value = false;
        emits("reflashList");
      }
      console.log(result);
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const resetForm = () => {
  formData.value = {
    baseId: dataInfo.value.id,
    content: undefined,
    finenessId: undefined,
    id: undefined,
    originalPrice: undefined,
    salePrice: null,
    slowMg: undefined,
    parameters: null,
    banner: null,
  };
  nextTick(() => {
    formRef.value && formRef.value.resetFields();
  });
};
const modalOpen = ref(false);
const goodsFinenessList = ref([]);
const getGoodsFineness = async () => {
  const result = await goodsFineness();
  if (result.code == 200) {
    goodsFinenessList.value = result.data;
  }
};
defineExpose({ open, addFunc });
onMounted(() => {
  getGoodsFineness();
});
</script>

<style lang="less">
:deep(.ant-upload-wrapper .ant-upload-select) {
  margin-right: 0 !important;
}
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
.card {
  background: #f4f6f8;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 8px;
  .item:last-child {
    margin-bottom: 0px;
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #262e47;
    font-size: 12px;
    margin-bottom: 27px;
    text {
      color: #5065f6;
      font-size: 18px;
      font-weight: 600;
      margin-right: 4px;
    }

    .content {
      color: #262e47;
      font-size: 18px;
      font-weight: 600;
    }

    .text {
      width: 40%;
    }
  }
}
</style>
